<template>
	<div id="app">
		<img id="image_xxx" src="./assets/logo.png" @load="onImageLoaded" style="display: none;">
		<HelloWorld/>
	</div>
</template>

<script>
import HelloWorld from './components/HelloWorld'
import glfx from 'glfx'

var model = {
	contrast : -0.5,
	canvas : null,
	texture : null
}

window.model = model

export default {
	name: 'App',

	data : function() {
		return model
	},

	watch : {
		contrast : function() {
			this.$nextTick(function() {
				this.updateImageEffect()
			})
		}
	},

	mounted : function() {

	},

	components: {
		HelloWorld
	},
	methods: {
		onImageLoaded : function() {
			this.canvas = glfx.canvas();
			var image = document.getElementById('image_xxx');
			this.texture = this.canvas.texture(image);

			image.parentNode.insertBefore(this.canvas, image);

			this.updateImageEffect()
		},

		updateImageEffect : function() {
			try {
				// apply the ink filter
				// canvas.draw(texture).ink(0.25).update();
				this.canvas.draw(this.texture).brightnessContrast(this.contrast, 0).update();
			} catch (e) {
				console.log(e)
			}
		}
	}
}
</script>

<style>
#app {
	font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
	margin-top: 60px;
	opacity: 0.1;
}
</style>
